<template>
  <div class="center-container">
    <!--  页面标题-->
    <div class="header-title">个人中心</div>

    <!--  内容区域-->
    <div class="center-form-area">
      <a-row>
        <a-col flex="350px">
          <a-form ref="formRef" :model="form" layout="vertical">
            <a-form-item label="登录账号" name="username">
              <a-input class="form-item" v-model:value.trim="form.username" placeholder="请输入登录账号" disabled />
            </a-form-item>
            <a-form-item label="手机号码" name="phone">
              <a-input class="form-item" v-model:value.trim="form.phone" placeholder="请输入手机号码" />
            </a-form-item>
            <a-form-item label="邮箱" name="">
              <a-input class="form-item" v-model:value="form.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-form>
          <!-- <a-button type="primary" @click="onSubmit">更新个人信息</a-button> -->
        </a-col>
        <a-col flex="auto">
          <a-form style="padding-left: 80px" layout="vertical">
            <a-form-item label="头像" name="avatar">
              <br />
              <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :headers="{ 'x-access-token': useUserStore().getToken }" :customRequest="customRequest" :before-upload="beforeUpload">
                <div v-if="avatarUrl" class="avatar-container">
                  <img :src="avatarUrl" class="avatar-image" alt="avatar" />
                  <div class="overlay">
                    <span>更新头像</span>
                  </div>
                </div>
                <div v-else>
                  <loading-outlined v-if="updateAvatarLoading" />
                  <plus-outlined v-else />
                  <div class="ant-upload-text">上传头像</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { loginApi } from '@/api/system/login-api.js'
import { useUserStore } from '@/store/modules/user-store'
import { message } from 'ant-design-vue'
import { errorSentry } from '@/lib/error-sentry'
import { accountApi } from '@/api/business/account/account-api'
import { useLoadingStore } from '@/store/modules/loading-store'
import { fileApi } from '@/api/support/file-api'
import { FILE_FOLDER_TYPE_ENUM } from '@/constants/support/file-const'
const loadingStore = useLoadingStore()

// 组件ref
const formRef = ref()

const formDefault = {
  // 头像
  avatar: undefined,
  // 登录账号
  username: '',
  // 手机号码
  phone: '',
  // 邮箱
  email: undefined
}
const form = reactive({ ...formDefault })
// 头像地址
const avatarUrl = ref()

// 查询登录信息
async function getLoginInfo() {
  try {
    //获取登录用户信息
    const res = await loginApi.getLoginInfo()
    const data = res.data
    //更新用户信息到pinia
    useUserStore().setUserLoginInfo(data)
    // 当前form展示
    form.username = data.userInfo.username
    form.email = data.userInfo.email
    form.phone = data.userInfo.phone
    // 头像展示
    avatarUrl.value = data.userInfo.head_img
  } catch (e) {
    errorSentry.captureError(e)
  }
}

// 头像上传
const accept = ref('.jpg,.jpeg,.png,.gif')
const maxSize = ref(10)
const folder = ref(FILE_FOLDER_TYPE_ENUM.COMMON.value)
const updateAvatarLoading = ref(false)
function beforeUpload(file, files) {
  const suffixIndex = file.name.lastIndexOf('.')
  const fileSuffix = file.name.substring(suffixIndex <= -1 ? 0 : suffixIndex)
  if (accept.value.indexOf(fileSuffix) === -1) {
    message.error(`只支持上传 ${accept.value.replaceAll(',', ' ')} 格式的文件`)
    return false
  }

  const isLimitSize = file.size / 1024 / 1024 < maxSize.value
  if (!isLimitSize) {
    message.error(`单个文件大小必须小于 ${maxSize.value} Mb`)
    return false
  }
  return true
}

async function customRequest(options) {
  updateAvatarLoading.value = true
  try {
    const formData = new FormData()
    formData.append('file', options.file)
    const res = await fileApi.uploadFile(formData)
    const file = res.data
    avatarUrl.value = file.url
    // 更新头像
    const updateAvatarForm = { head_img: file.url }
    await accountApi.queryChangeAvatar(updateAvatarForm)
    message.success('更新成功')
    // 重新获取详情，刷新整体缓存
    await getLoginInfo()
  } catch (e) {
    message.error(e.msg)
    errorSentry.captureError(e)
  } finally {
    updateAvatarLoading.value = false
  }
}

// 更新员工信息
async function updateEmployee() {
  loadingStore.show()
  try {
    const data = {
      phone: form.phone,
      email: form.email
    }
    await accountApi.queryChangeMessage(data)
    message.success('更新成功')
    // 重新获取详情，刷新整体缓存
    await getLoginInfo()
  } catch (error) {
    message.error(error.msg)
    errorSentry.captureError(error)
  } finally {
    loadingStore.hide()
  }
}

// 表单提交
function onSubmit() {
  formRef.value
    .validate()
    .then(() => {
      updateEmployee()
    })
    .catch((error) => {
      console.log('error', error)
      message.error('参数验证错误，请仔细填写表单数据!')
    })
}

onMounted(() => {
  getLoginInfo()
})
</script>
<style lang="less" scoped>
.center-container {
  .header-title {
    font-size: 20px;
  }

  .center-form-area {
    margin-top: 20px;

    .avatar-container {
      position: relative;
      border-radius: 50%;
      overflow: hidden;
      width: 100%;
      height: 100%;

      .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 17px;
      }

      &:hover .overlay {
        opacity: 1; /* 鼠标悬停时显示蒙版 */
      }
    }

    .avatar-uploader {
      :deep(.ant-upload) {
        border-radius: 50%;
        width: 150px;
        height: 150px;
      }
    }

    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
}
</style>
